<template>
  <div class="wrapper">
    <div class="toolbar">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="success" @click="goodsTypeVisible=true">添加商品类别</el-button>
        </el-form-item>
      </el-form>
    </div>
     <el-table
                v-loading="$store.state.isLoading"
                :data="$store.state.goods.goodsTypeList"
                :border="true"
                style="width: 100%">
            <el-table-column
                    label="创建时间"
                    width="220">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.createTime |date }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品类别名称"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.goodsTypeName}}
                </template>
            </el-table-column>
            <el-table-column
                    label="店铺名称"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.shopName}}
                </template>
            </el-table-column>
            <el-table-column
                    label="店铺类别"
                    width="180">
                <template slot-scope="scope">
                    {{scope.row.shopTypeName}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="$store.dispatch('deleteGoodsTypeList',scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <PageInfo action-name="getGoodsTypeList" ></PageInfo>

    <GoodsTypeDialog v-if="goodsTypeVisible" :goodsTypeVisible.sync="goodsTypeVisible"></GoodsTypeDialog>
  </div>
</template>

<script>
export default {
  components: {
    GoodsTypeDialog: () => import("@/components/dialog/GoodsTypeDialog")
  },
  props: {},
  data() {
    return {
      goodsTypeVisible: false
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
</style>